<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  operations: {
    type: Array,
    default: () => ['add']
  }
});

const emit = defineEmits(['result']);

const num1 = ref(0);
const num2 = ref(0);

// 可用的操作类型
const operationMap = {
  add: { icon: '+', label: '加法' },
  multiply: { icon: '×', label: '乘法' },
  divide: { icon: '÷', label: '除法' }
};

// 根据props过滤要显示的操作按钮
const visibleOperations = computed(() => {
  return props.operations.map(op => ({ 
    type: op, 
    ...operationMap[op] 
  }));
});

// 计算函数
const calculate = (type) => {
  if (isNaN(num1.value) || isNaN(num2.value)) {
    emit('result', { type, result: '请输入有效数字', num1: num1.value, num2: num2.value });
    return;
  }
  
  let result;
  switch(type) {
    case 'add':
      result = num1.value + num2.value;
      break;
    case 'multiply':
      result = num1.value * num2.value;
      break;
    case 'divide':
      if (num2.value === 0) {
        result = '除数不能为零';
      } else {
        result = num1.value / num2.value;
      }
      break;
    default:
      result = '不支持的操作';
  }
  
  emit('result', { type, result, num1: num1.value, num2: num2.value });
};
</script>

<template>
  <view class="calculator-container">
    <view class="input-group">
      <input type="number" v-model.number="num1" placeholder="输入第一个数字" class="input-field" />
      <input type="number" v-model.number="num2" placeholder="输入第二个数字" class="input-field" />
    </view>
    
    <view class="operation-buttons">
      <button 
        v-for="op in visibleOperations" 
        :key="op.type"
        @click="calculate(op.type)"
        class="operation-btn"
        :class="[op.type]"
      >
        <view class="btn-content">
          <text class="icon">{{ op.icon }}</text>
          <text class="label">{{ op.label }}</text>
        </view>
      </button>
    </view>
  </view>
</template>



<style scoped>
.calculator-container {
  padding: 30rpx;
  border-radius: 20rpx;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
  margin: 20rpx;
}

.input-group {
  margin-bottom: 30rpx;
}

.input-field {
  height: 90rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 32rpx;
  background-color: #fff;
}

.input-field:focus {
  border-color: #3498db;
  outline: none;
}

.operation-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200rpx, 1fr));
  gap: 20rpx;
}

.operation-btn {
  height: 120rpx;
  border-radius: 15rpx;
  border: none;
  font-size: 36rpx;
  color: white;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.operation-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.2);
  opacity: 0;
  transition: opacity 0.3s;
}

.operation-btn:active::after {
  opacity: 1;
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: 50rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.label {
  font-size: 28rpx;
}

.add {
  background: linear-gradient(135deg, #3498db, #1abc9c);
}

.multiply {
  background: linear-gradient(135deg, #e74c3c, #e67e22);
}

.divide {
  background: linear-gradient(135deg, #9b59b6, #34495e);
}
</style>